<template>
  <div class="container">
    <div v-for="(item ,index) in answerSheet" :key="index" class="item">
      <div v-if="titleVisible(index)" class="item-title-view">
        <div class="item-title-top" />
        <div class="item-title">{{ item.dimensionName }}</div>
      </div>
      <div class="content-view">
        <div>{{ item.title }}({{ item.month }}月龄题目标号{{ item.indexOnPaper }})</div>
        <img
          v-if="item.checked"
          class="item-check-yes"
          src="@/assets/assess-yes.png"
        >
        <img
          v-else
          class="item-check-no"
          src="@/assets/assess-no.png"
        >
      </div>
      <div v-if="lineVisible(index)" class="suggest--exline" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'AnswerSheet',
  props: {
    answerSheet: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    titleVisible (index) {
      if (index > 0) {
        const now = this.$props.answerSheet[index].dimensionName
        const last = this.$props.answerSheet[index - 1].dimensionName
        if (now === last) {
          return false
        }
      }
      return true
    },

    lineVisible (index) {
      if (index < this.$props.answerSheet.length - 1) {
        const now = this.$props.answerSheet[index].dimensionName
        const last = this.$props.answerSheet[index + 1].dimensionName
        if (now === last) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style scoped lang="scss">
  .container {
    width: 100%;
    background-color: #FFFFFF;
  }

  .item{
    background-color: #FFFFFF;
  }

  .item-title-view{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 15px;
  }

  .item-title-top{
    width:5px;
    height:7.5px;
    background:rgba(250,203,47,1);
    opacity:1;
  }

  .item-title{
    font-size:15px;
    font-weight:bold;
    color:rgba(34,34,34,1);
    opacity:1;
    margin-left: 5px;
  }

  .content-view{
    display: flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 10px;
    align-items: center;
    justify-content: space-between;

    font-size: 15px;
    color: #333333;
  }

  .item-check-yes{
    width: 18px;
    height: 12.5px;
  }

  .item-check-no{
    width: 15px;
    height: 15px;
  }

  .suggest--exline{
    height: 1px;
    overflow:hidden;
    margin-top: 15px;
  }
</style>
